<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        .box{
            height:55px;
            background:url("file/head_bg.jpg") repeat-x ;
            margin-top:50px;
            border:1px solid #E1E1E1;
        }
        ul li{
            list-style:none;
            margin-left:300px;
        }
        li a{
            background:url("file/li_bg.png") no-repeat right center;
            text-decoration:none;
            float:left;
            padding:0 30px;
            line-height:55px;
        }
        li a:hover{
            text-decoration:underline;
            color:orange;
            background-color:red;
        }
        .img{
            position:absolute;
            left:580px;
            top:32px;
        }
    </style>
</head>
<body>
   <div class="box">
       <ul>
           <li><a href="#">智能手机</a></li>
           <li><a href="#">平板电脑</a></li>
           <li><a href="#">百度</a></li>
           <li><a href="#">谷歌</a></li>
           <li><a href="#">么么哒</a></li>
       </ul>
       <div class="img">
           <img src="file/new.png" title="new" alt="new图片">
       </div>
   </div>
</body>
</html>